import React, { Component } from 'react'

import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'
import {API} from '../../../../utils/api'
import {getLocalCity} from '../../../../utils/localCity'

import styles from './index.module.css'
import {Spring} from 'react-spring/renderprops'

const selectStatus = {
  area: false,
  mode: false,
  price: false,
  more: false,
}

const selectedValues = {
  area: ["area", null],
  mode: ["null"],
  price: ["null"],
  more: []
}

export default class Filter extends Component {
  state = {
    selectStatus,
    openType: '',
    filterInfo: {},
    selectedValues
  }

  getFilterInfo = async () => {
    const {value} = await getLocalCity()
    const {data: {body}} = await API.get(`houses/condition?id=${value}`)
    
    this.setState({
      filterInfo: body
    })
  }

  componentDidMount() {
    this.getFilterInfo()
  }

  itemClickFn = (type) => {
    document.body.className = styles.bodyClass

    const {selectStatus, selectedValues} = this.state
  
    const newSelectStatus = {...selectStatus}

    Object.keys(newSelectStatus).forEach(item => { 
      if ((item === 'area' && selectedValues['area'][0] === 'area' && selectedValues['area'].length > 2) || selectedValues['area'][0] !== 'area') {
        newSelectStatus['area'] = true
      } else if (item === 'mode' && selectedValues['mode'][0] !== 'null' ) {
        newSelectStatus['mode'] = true
      } else if(item === 'price'&& selectedValues['price'][0] !== 'null') {
        newSelectStatus['price'] = true
      } else if(item === 'more' && selectedValues['more'].length > 0) {
        newSelectStatus['more'] = true
      } else {
        newSelectStatus[item] = false
      }

      if (type === item) {
        newSelectStatus[type] = true
      }

    })

    this.setState({
      selectStatus: newSelectStatus,
      openType: type
    })
  }

  onCancel = (type, value) => {
    document.body.className = ''
    let newSelectStatus = {...this.state.selectStatus}

    if (type === 'area' && ( value.length > 2 || value[0] !== 'area')) {
      newSelectStatus['area'] = true
    } else if (type === 'mode' && value[0] !== 'null' ) {
      console.log(89089080809)
      newSelectStatus['mode'] = true
    } else if(type === 'price'&& value[0] !== 'null') {
      newSelectStatus['price'] = true
    } else if(type === 'more' && value.length > 0) {
      newSelectStatus['more'] = true
    } else {
      newSelectStatus[type] = false
    }


    this.setState({
      openType: '',
      selectStatus: newSelectStatus,
    })
  }

  onOk = (type, value) => {
    document.body.className = ''
    let newSelectStatus = {...this.state.selectStatus}

    if (type === 'area' && ( value.length > 2 || value[0] !== 'area')) {
      newSelectStatus['area'] = true
    } else if (type === 'mode' && value[0] !== 'null' ) {
      newSelectStatus['mode'] = true
    } else if(type === 'price'&& value[0] !== 'null') {
      newSelectStatus['price'] = true
    } else if(type === 'more' && value.length > 0) {
      newSelectStatus['more'] = true
    } else {
      newSelectStatus[type] = false
    }

    this.setState({
      openType: '',
      selectedValues: {
        ...this.state.selectedValues,
        [type]: value
      },
      selectStatus: newSelectStatus,
    }, () => {
      let filters = {}

      const { area, mode, price, more } = this.state.selectedValues
      // 区域
      const areaKey = area[0]
      let areaValue = "null"
      if (area.length === 3) {
        areaValue = area[2] !== "null" ? area[2] : area[1]
      }
      filters[areaKey] = areaValue
  
      // 价格方式
      filters.mode = mode[0]
      filters.price = price[0]
  
      // 筛选
      filters.more = more.join(',')
  
      this.props.onFilters(filters)
    })

  }

  renderFilterPicker = () => {
    const {openType, filterInfo: {area, price, subway,rentType}, selectedValues } = this.state

    if( openType !== 'area' &&  openType !== 'mode' && openType !== 'price') {
      return ''
    }

    let data = []
    let cols = 3
    let value = selectedValues[openType]

    switch(openType) {
      case 'area':
        data = [area, subway]
        cols = 3
        break 
      case 'mode':
        data = rentType
        cols = 1
        break 
      case 'price':
        data = price
        cols = 1
        break 
      default :
       break
    }

    return <FilterPicker key={openType} value={value} type={openType} data={data} onCancel={this.onCancel}  onOk={this.onOk} cols={cols}/>
  }

  renderFilterMore = () => {
    if(this.state.openType !== 'more') {
      return null
    }
    
    const { roomType, oriented, floor, characteristic } = this.state.filterInfo

    let data = {
      roomType, oriented, floor, characteristic
    }

    return <FilterMore type={this.state.openType} selectedValues={this.state.selectedValues.more} onOk={this.onOk} onCancel={this.onCancel} data={data}/>
  }

  renderFilterMask = () => {
    const { openType } = this.state

    const isHide = openType === 'more' || openType === ''

    return (
      <Spring from={{ opacity: 0 }} to={{ opacity: isHide ? 0 : 1 }}>
        {props => {
          if (props.opacity === 0) {
            return null
          }

          return (
            <div
              style={props}
              className={styles.mask}
              onClick={() => this.onCancel(openType)}
            />
          )
        }}
      </Spring>
    )
  }

  render() {
    const {selectStatus} = this.state
    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        {this.renderFilterMask()}
       
        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle selectStatus={selectStatus} clickFn={this.itemClickFn}/>

          {/* 前三个菜单对应的内容： */}
          { this.renderFilterPicker() }

          {/* 最后一个菜单对应的内容： */}
          {this.renderFilterMore()}
        </div>
      </div>
    )
  }
}
